<template>
  <view class="page">
    <!-- 顶部：头像与问候 -->
    <view class="header">
      <image
  class="avatar"
  :src="user.avatar || '/static/icons/dog.png'"
  mode="aspectFill"
  @click="goEdit"
/>

      <view class="hello">
        <text class="hello-prefix">您好，</text>
        <text class="hello-name">{{ user.nickName || user.userName }}</text>
      </view>
    </view>

    <!-- 上半区：你的宠物 / 你的权益 -->
    <view class="cards">
      <!-- 你的宠物 -->
      <view class="card card-pet" @tap="goPetDetail">
        <text class="card-title">你的宠物</text>
        <image class="pet-img" :src="pet.photo || defaultPetImg" mode="aspectFill"></image>
        <view class="pet-row">
          <text class="pet-name">{{ pet.type || '' }} {{ pet.name || '未添加' }}</text>
          <text class="pet-link">查看详情</text>
        </view>
      </view>

      <!-- 你的权益 -->
      <view class="card card-benefit" @tap="goMember">
        <text class="card-title">你的权益</text>
        <view class="benefit-icon-wrap">
          <view class="benefit-icon">
            <view class="benefit-line"></view>
            <view class="benefit-star">★</view>
          </view>
        </view>
        <view class="benefit-texts">
          <text class="benefit-title">加入宠利派会员俱乐部</text>
          <text class="benefit-link">去领取</text>
        </view>
      </view>
    </view>

    <!-- 订单入口 -->
    <view class="orders">
      <view class="order-item" @tap="goServiceOrders">
        <view class="order-icon"><view class="card-shape"></view></view>
        <text class="order-text">服务订单</text>
      </view>
      <view class="order-item" @tap="goAllOrders">
        <view class="order-icon"><view class="clip"></view></view>
        <text class="order-text">全部订单</text>
      </view>
    </view>

    <!-- 列表：优惠券 / 套餐卡 / 地址管理 -->
    <view class="list">
      <view class="cell" hover-class="cell-hover" @tap="goCoupons">
        <text class="cell-text">优惠券</text>
        <view class="cell-right">
          <text class="cell-value">{{ stats.coupon }}</text>
        </view>
      </view>

      <view class="cell" hover-class="cell-hover" @tap="goPacks">
        <text class="cell-text">套餐/卡</text>
        <view class="cell-right">
          <text class="cell-value">{{ stats.pack }}</text>
        </view>
      </view>

      <view class="cell" hover-class="cell-hover" @tap="goAddress">
        <text class="cell-text">地址管理</text>
        <view class="cell-right">
          <text class="cell-value">{{ addresses.length }} 个</text>
        </view>
      </view>
    </view>

    <view class="safe-bottom"></view>
  </view>
</template>

<script>
import request from '@/utils/request.js'

export default {
  name: 'ProfilePage',
  data() {
    return {
      user: {},
      pet: {},
      addresses: [],
      stats: {
        coupon: 0,
        pack: 0
      },
      defaultAvatar: '/static/icons/dog.png',
      defaultPetImg: '/static/icons/dog.png'
    }
  },
  async onShow() {
    await this.loadData()
  },
  methods: {
    goEdit() {
    uni.navigateTo({ url: '/pages/user/edit' })
  },
    async loadData() {
      const user = uni.getStorageSync('user')
      if (!user || !user.userId) {
        uni.redirectTo({ url: '/pages/login/login' })
        return
      }

      this.user = user

      // 宠物
      const petRes = await request({ url: `/pet/list/${user.userId}`, method: 'GET' })
      if (petRes.code === 200 && petRes.data.length > 0) {
        this.pet = petRes.data[0]
      }

      // 地址
      const addrRes = await request({ url: `/user-address/${user.userId}`, method: 'GET' })
      if (addrRes.code === 200) {
        this.addresses = addrRes.data || []
      }

      // 优惠券
      const couponRes = await request({ url: `/user-coupon/${user.userId}`, method: 'GET' })
      if (couponRes.code === 200) {
        this.stats.coupon = couponRes.data.length
      }
    },

    goPetDetail() {
      uni.navigateTo({ url: '/pages/pet/index' })
    },
    goMember() {
      uni.navigateTo({ url: '/pages/member/index' })
    },
    goServiceOrders() {
      uni.navigateTo({ url: '/pages/reservation/list' })
    },
    goAllOrders() {
      uni.switchTab({ url: '/pages/reservation/list' })
    },
    goCoupons() {
      uni.navigateTo({ url: '/pages/coupon/index' })
    },
    goPacks() {
      uni.showToast({ title: '功能开发中', icon: 'none' })
    },
    goAddress() {
      uni.navigateTo({ url: '/pages/address/address' })
    }
  }
}
</script>

<style lang="scss" scoped> .page { background: #ffffff; min-height: 100vh; padding: 24rpx 28rpx 32rpx; box-sizing: border-box; } .header { display: flex; align-items: center; margin-bottom: 28rpx; } .avatar { width: 88rpx; height: 88rpx; border-radius: 50%; background: #f2f2f2; } .hello { margin-left: 20rpx; display: flex; align-items: baseline; } .hello-prefix { font-size: 32rpx; color: #202020; } .hello-name { font-size: 36rpx; font-weight: 600; color: #202020; } .cards { display: grid; grid-template-columns: 1fr 1fr; gap: 20rpx; margin-bottom: 24rpx; } .card { background: #ffffff; border-radius: 20rpx; box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.06); padding: 22rpx; } .card-title { font-size: 28rpx; font-weight: 600; color: #111; } .pet-img { width: 100%; height: 220rpx; border-radius: 16rpx; margin: 18rpx 0; background: #f4f4f4; } .pet-row { display: flex; align-items: center; justify-content: space-between; } .pet-name { font-size: 28rpx; color: #111; } .pet-link { font-size: 24rpx; color: #2a76ff; } .benefit-icon-wrap { display: flex; justify-content: center; margin: 24rpx 0 10rpx; } .benefit-icon { width: 140rpx; height: 92rpx; border: 4rpx solid #111; border-radius: 16rpx; position: relative; } .benefit-line { position: absolute; left: 0; right: 0; top: 22rpx; height: 6rpx; background: #111; } .benefit-star { position: absolute; right: 18rpx; bottom: 16rpx; font-size: 28rpx; line-height: 1; } .benefit-texts { display: flex; justify-content: space-between; align-items: center; } .benefit-title { font-size: 26rpx; color: #111; width: 70%; } .benefit-link { font-size: 24rpx; color: #2a76ff; } .orders { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18rpx; margin: 8rpx 0 16rpx; } .order-item { background: #ffffff; border-radius: 20rpx; box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.06); padding: 24rpx 10rpx; display: flex; flex-direction: column; align-items: center; } .order-icon { width: 72rpx; height: 72rpx; position: relative; margin-bottom: 12rpx; } .bag { width: 72rpx; height: 52rpx; border: 4rpx solid #111; border-radius: 12rpx; position: absolute; bottom: 0; left: 0; } .bag::after { content: ''; position: absolute; top: -18rpx; left: 14rpx; right: 14rpx; height: 20rpx; border: 4rpx solid #111; border-bottom: none; border-top-left-radius: 28rpx; border-top-right-radius: 28rpx; } .card-shape { width: 72rpx; height: 48rpx; border: 4rpx solid #111; border-radius: 12rpx; position: absolute; bottom: 8rpx; left: 0; } .card-shape::after { content: ''; position: absolute; top: 12rpx; left: 8rpx; right: 8rpx; height: 6rpx; background: #111; } .clip { width: 56rpx; height: 64rpx; border: 4rpx solid #111; border-radius: 8rpx; position: absolute; bottom: 4rpx; left: 8rpx; } .clip::after { content: ''; position: absolute; top: -16rpx; left: 14rpx; width: 28rpx; height: 16rpx; border: 4rpx solid #111; border-bottom: none; border-top-left-radius: 16rpx; border-top-right-radius: 16rpx; } .order-text { font-size: 26rpx; color: #111; } .list { margin-top: 10rpx; background: #ffffff; border-radius: 20rpx; overflow: hidden; box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.06); } .cell { display: flex; align-items: center; justify-content: space-between; padding: 28rpx 24rpx; border-bottom: 1rpx solid #f2f2f2; background: #ffffff; } .cell:last-child { border-bottom: none; } .cell-hover { background: #f7f8fa; } .cell-text { font-size: 28rpx; color: #111; } .cell-right { display: flex; align-items: center; gap: 14rpx; } .cell-value { font-size: 28rpx; color: #111; } .safe-bottom { height: env(safe-area-inset-bottom); } </style>